<template>
  <router-view />
</template>

<script>
import { toI18nName } from 'boot/i18n'
import { useMeta, useQuasar } from 'quasar'
import { useSysSettingStore } from 'stores/system-setting'
import { computed, defineComponent, nextTick, provide } from 'vue'
import { useRoute } from 'vue-router'
import packageJSON from 'app/package.json'

export default defineComponent({
  name: 'App',
  setup () {
    const sysSetting = useSysSettingStore()
    nextTick(() => {
      const appLoadBox = document.getElementById('appLoading')
      appLoadBox && appLoadBox.remove()
    })
    const $q = useQuasar()
    const route = useRoute()
    provide('BgToColor', sysSetting.BgToColor)
    provide('isXS', computed(() => $q.screen.xs))
    provide('isDark', computed(() => sysSetting.isDark))
    provide('isDense', computed(() => sysSetting.isDense))
    useMeta(() => {
      const title = (route.meta || {})[toI18nName('menuZhCn')] || (route.meta || {}).title
      return title ? { title: `${title}｜${packageJSON.productName}` } : { title: `${packageJSON.productName}` }
    })
    sysSetting.toggleDark()
    sysSetting.setInitColor()
  }
})
</script>